<script setup lang="ts">
const {waterForm} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
}>();

const calculateXdbfpc = () => {
  // 遍历 `pxycd` 数组，每 2 个一组进行计算
  for (let i = 0; i < waterForm.pxycd.length; i += 2) {
    const itemA = waterForm.pxycd[i];      // 偶数索引
    const itemB = waterForm.pxycd[i + 1];  // 下一行（奇数索引）

    if (!itemA || !itemB) continue; // 避免数组越界

    const bodA = parseFloat(itemA.px_bod);
    const bodB = parseFloat(itemB.px_bod);

    // 确保 `px_bod` 都是有效数字，并且分母不为 0
    if (!isNaN(bodA) && !isNaN(bodB) && (bodA + bodB) !== 0) {
      const result = Math.abs(((bodA - bodB) / (bodA + bodB)) * 100); // 取正数
      itemA.px_xdbfpc = `${result.toFixed(2)}%`; // 保留两位小数
      console.log(itemA.px_xdbfpc)
    } else {
      itemA.px_xdbfpc = ""; // 如果有缺失值，则不计算
    }
  }
};


</script>

<template>
  <el-card class="box-card">
    <div style="text-align: center;display: flex;align-items: center;justify-content: space-between">
      <h3>SXLPHJ/JL/CX-22-50</h3>
      <h1> 水质 生化需氧量分析原始记录(B面) </h1>
      <div></div>
    </div>
    <table class="table">
      <tr>
        <td colspan="5" style="text-align: center">
          平行样测定
        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td>样品编号</td>
        <td>BOD(mg/L)</td>
        <td>相对百分偏差(%)</td>
        <td>质控要求(%)</td>
        <td>是否合格</td>
      </tr>
      <tr v-for="(item, index) in waterForm.pxycd" :key="index">
        <td>
          <el-input style="width: 100%; border: 1px solid transparent" placeholder="请输入"
                    v-model="item.px_ypbh"/>
        </td>
        <td>
          <el-input style="width: 100%; border: 1px solid transparent" placeholder="请输入"
                    @blur="calculateXdbfpc"
                    v-model="item.px_bod"/>
        </td>

        <!-- 只在偶数索引时渲染，并合并 2 行 -->
        <td v-if="index % 2 === 0" :rowspan="2">
          <el-input style="width: 100%; border: 1px solid transparent" placeholder="请输入"

                    v-model="item.px_xdbfpc"/>
        </td>

        <td v-if="index % 2 === 0" :rowspan="2">
          <el-input style="width: 100%; border: 1px solid transparent" placeholder="请输入"
                    v-model="item.px_zkyq"/>
        </td>
        <td v-if="index % 2 === 0" :rowspan="2">
          <el-input style="width: 100%; border: 1px solid transparent" placeholder="请输入"
                    v-model="item.px_sfhg"/>
        </td>
      </tr>

      <tr>
        <td colspan="5" style="text-align: center">
          空白样品测定
        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td>样品编号</td>
        <td>测定浓度(mg/L)</td>
        <td>质控要求(mg/L)</td>
        <td colspan="2">是否合格</td>
      </tr>
      <tr v-for="(item,index) in waterForm.kbycd" :key="index">
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="item.kb_ypbh"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="item.kb_cdnd"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="item.kb_zkyq"/>
        </td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="item.kb_sfhg"/>
        </td>
      </tr>
      <tr>
        <td colspan="5" style="text-align: center">
          标准样品测定
        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td>样品编号</td>
        <td>测定浓度(mg/L)</td>
        <td>质控要求(mg/L)</td>
        <td colspan="2">是否合格</td>
      </tr>
      <tr v-for="(item,index) in waterForm.bzycd" :key="index">
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="item.bz_ypbh"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="item.bz_cdnd"/>
        </td>
        <td>
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="item.bz_bzz"/>
        </td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="item.bz_sfhg"/>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="4">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.notes"/>
        </td>
      </tr>
    </table>
  </el-card>
</template>

<style scoped lang="scss">

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 10px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
